Bases de développement mobile

Dans ce MON je souhaite apprendre les bases de TypeScript

Liens utiles

Site TypeScript Autre site très bien Vidéo youtube TypeScript

Sommaire

1. TypeScript, qu'est-ce que c'est
2. Pourquoi ce MON
3. Lancer un projet TypeScript
4. Les types en TypeScript
5. Les fonctions et les classes
6. Notion d'interface
7. Conclusion

TypeScript, qu'est-ce que c'est

TypeScript est un langage de programmation développé par Microsoft, qui s'appuie sur JavaScript. La différence entre les deux est que TypeScript est un langage typé, il prend les fonctionnalités de bases de JS et en ajoute des nouvelles dans lesquels le type des variables, des fonctions doit être précisé. Cela apporte une meilleure stabilité et sécurité au code et permet de limiter grandement les erreurs ou en tout cas de les détecter plus tôt.

Pourquoi ce MON

J'ai voulu en apprendre plus sur TypeScript pour plusieurs raisons. D'abord car ce langage est en plein essort, de nombreuses entreprises l'utilisent et c'est le cas de celle dans laquelle je vais effectuer mon stage. C'est donc aussi pour ça que je souhaite connaître ce langage.

Lancer un projet TypeScript

Pour lancer un projet TypeScript, rien de très compliqué. Il faut ouvrir un nouvel onglet sur VSCode avec un terminal et taper les commandes suivantes :

npm install -D typescript

Cette commande permet d'installer le compilateur.

Ensuite on crée un projet node avec la commande :

npm init -y

npx tsc .ts

Les fichiers typescript doivent se terminer par .ts au lieu de .js comme en JavaScript.

Les types en TypeScript

L'un des points forts de TypeScript est son système de typage statique. Cela signifie qu'on peut spécifier le type de chaque variable ou de chaque paramètre de fonction et même le type de retour des fonctions. Le code sera alors bien plus clair et plus prévisible, et cela évite les erreurs de typage comme il en arrive souvent. Voici un exemple de code TypeScript avec des types pour se rendre mieux compte de comment cela fonctionne :

// Déclaration d'une variable avec son type
let message: string;
message = "Hello, TypeScript!";

// Déclaration d'une fonction avec des types pour les paramètres et le retour
function add(a: number, b: number): number {
    return a + b;
}

// Utilisation de la fonction
const result = add(10, 20);
console.log(result);

On voit ici que la variable message est un String, ou ne pourra donc pas lui attribuer la valeur d'un nombre par exemple. Ensuite la fonction possède deux paramètres, des nombres et le retour doit lui aussi être un nombre.

Les fonctions et les classes

En TypeScript, on peut créer des classes comme en JavaScript, la seule différence étant que l'on doit préciser le type des propriétés que l'on utilise.

Voici comment on écrirait une classe en JavaScript :

class Person {
    // Constructeur pour initialiser les propriétés
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Méthode de la classe
    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

Et voici comment on l'écrirait en TypeScript :

class Person {
    // Propriétés de la classe avec des types
    name: string;
    age: number;

    // Constructeur pour initialiser les propriétés
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // Méthode de la classe
    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

Notion d'interface

TypeScript permet de créer ce qu'on appelle des interfaces. Cette notion n'existe pas en JavaScript, elle est propre à TypeScript car elle permet de typer les objets et les classes en définissant proprement leur structure. Prenons un exemple :

interface Person {
    name: string;
    age: number;
}

function greet(person: Person): string {
    return `Hello, my name is ${person.name} and I am ${person.age} years old.`;
}

const alice = { name: 'Alice', age: 30 };
console.log(greet(alice));

Conclusion

Grâce à ce MON j'ai pu découvir sommairement ce qu'était TypeScript. Malheuresement en seulement 10h je n'ai pas pu manipuler assez pour vraiment m'habituer à l'utiliser, mais je vais gagner du temps d'apprentissage quand je serai en stage car je saurai à quoi m'attendre.

Horodatage

Lecture des différentes informations sur TypeScript: 3h Visionnage de la vidéo : 3h Ecriture du code et mise en place d'un projet TS : 4h